<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<title>Stock Miner</title>
		<meta http-equiv="Content-Language" content="en-us" />
		<meta http-equiv="imagetoolbar" content="no" />
		<meta name="MSSmartTagsPreventParsing" content="true" />
		<meta name="description" content="Description" />
		<meta name="keywords" content="stock analysis, stock articles, classification, naive bayes" />
		<meta name="author" content="Magdalena Anna Furman & Helge Munk Jacobsen" />
		
		<link rel="stylesheet" type="text/css" href="magda_style.css">
		
		 <!-- Setup Datepicker -->
		 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script>
			$(function() {
			$( "#start_date" ).datepicker({ minDate: (new Date(2010, 1, 1)), maxDate: -1 });
			$( "#end_date" ).datepicker({ minDate: (new Date(2010, 1, 1)), maxDate: -1 });
			});
		</script>
		
		<!-- Google Chart Thing -->
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript">
		  google.load("visualization", "1", {packages:["corechart"]});
		  
		  google.setOnLoadCallback(drawChart);
		  
		  function drawChart() {

			// Create our data table.
			var data = new google.visualization.DataTable();
			data.addColumn('string', 'Day');
			data.addColumn('number', 'Closing price');
			data.addRows([
					// Instead of plugging in the values manually, or reading them
					// from a Data Source like Google Spreadsheets, feed them in
					// using Jinja, the templating system Flask uses.
					// Each iteration evaluates to something like this:
					// ['Saturday', 28],
					% for dayname, num in data:
					['{{ dayname }}', {{ num }}],
					% end
			]);

        // Instantiate and draw our chart, passing in some options. All the
        // options go into a single {}; some options' values go into a nested
        // {}. Some values, such as colors, must be given as strings. The
        // Google Charts API is well-documented.
        var chart = new google.visualization.LineChart(
                document.getElementById('chart_div'));
        chart.draw(data, {	title: 'Stock prices',
							legend: 'none', 
							hAxis: {minValue: 250},
							hAxis: {maxValue: 270},
							vAxis: {baseline: 0},
							colors: ['#A0D100']
						});
      }
		</script>

	</head>
	<body>
	
		<h1>Stock Miner</h1>
		<br>
		<form action="">
			Start date: <input type="text" id="start_date" name="start_date_name"/>
			End date: &nbsp;&nbsp;<input type="text" id="end_date" name="end_date_name"/>
			Company: <input type="text" name="company"><input type="submit" value="Submit">

			</form>
			<br>		
			<h3>Company: <span class='company_name'>{{company}}</span> 
			%if invalid:
			is not present in the set. Try e.g. LNKD, MSFT or GOOG or look up the list here: <a href="http://www.student.dtu.dk/~s110848/companylist.csv">COMPANY LIST</a>
			%end
			</h3>
			<h3>Stock change: <span class='stock_name'>{{stock}}</span>.</h3>
			<h3>Start date: <span class='start_date'>{{start}}</span>.</h3>
			<h3>End date: <span class='end_date'>{{end}}</span>.</h3>
			<br>
			<div id="chart_div" style="width: 900px; height: 500px;"></div>
			<br>

		<textarea rows="10" cols="30">
		The cat was playing in the garden.
		</textarea>
	</body>
</html>